<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input id="num1" type="text" placeholder="请输入一个数字">
    <span>+</span>
    <input id="num2" type="text" placeholder="请输入第二个数字">
    <input id="btn" type="button" value="=">
    <input id="res" type="text">

    <script>

        // 1 获取相关的对象
        //   获取4个对象

        // 拿到第一个输入框存在变量 oNum1中   ---  注意
        var oNum1 = document.getElementById('num1') ;

        console.log(oNum1) ;

        // 拿到第二个输入框存在变量 oNum2中   ---  注意
        var oNum2 = document.getElementById('num2') ;

        console.log(oNum2) ;


        // 拿到按钮存在变量 oBtn中   ---  注意
        var oBtn = document.getElementById('btn') ;

        console.log(oBtn) ;

        // 拿到结果的输入框存在变量 oRes中   ---  注意
        var oRes = document.getElementById('res') ;

        console.log(oRes) ;



        // 2 绑定点击事件
        oBtn.onclick = function () {  
            // 测试一下事件是否绑定成功
            // alert('ok') ;   --- 注意：输入非数字的时候 --- 引号!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            // 2.1 获取第一个输入框的值  --- 注意:所有输入框的值拿到的都是字符串!!!!!!!!!!!!!!!!
            // var n1 = oNum1.value * 1 ;
            // // 测试
            // console.log(n1) ;

            // // 拿到第二个输入框的值
            // var n2 = oNum2.value * 1 ;

            // // 求和
            // var sum = n1 + n2 ;

            // console.log(sum) ;

            // // 把求和的结果放在框里面
            // oRes.value = sum ;



            oRes.value = oNum1.value * 1 + oNum2.value * 1 ;
        }

       
    </script>
    
</body>
</html>